<template>
  <div class="sample-demo" :class="{ 'is-fullscreen': fullscreen }" :style="{ height: height }">
    <header class="sample-demo__hd">
      <h4 class="sample-demo__hd-title">{{ title }}</h4>

      <div class="sample-demo__hd-actions">
        <a class="sample-demo__hd-actions-link" :href="demoSrc" target="_blank">演示</a>

        <a v-if="codeSrc" class="sample-demo__hd-actions-link" :href="codeSrc" target="_blank">源码</a>

        <a class="sample-demo__hd-actions-link" @click="fullscreen = !fullscreen">{{
          fullscreen ? '退出全屏' : '全屏'
        }}</a>

        <a class="sample-demo__hd-actions-link" @click="codeVisible = !codeVisible"
          >查看{{ codeVisible ? '演示' : '代码' }}</a
        >
      </div>
    </header>

    <div class="sample-demo__bd">
      <iframe v-show="!codeVisible" class="sample-demo__frame" :src="demoSrc" />

      <div v-show="codeVisible" class="sample-demo__code">
        <slot />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  name: 'SampleDemo',

  props: {
    /** 标题 */
    title: {
      type: String,
      default: ''
    },

    /** demo 地址 */
    demo: {
      type: String,
      required: true
    },

    /** 源码地址 */
    code: String,

    /** 高度 */
    height: String
  },

  setup(props) {
    return {
      /** 是否全屏 */
      fullscreen: ref(false),

      /** 代码是否显示 */
      codeVisible: ref(false),

      /** 演示地址 */
      demoSrc: computed(() => `https://fdd-contract.4everland.app${props.demo}`),

      /** 源码地址 */
      codeSrc: computed(() => (props.code ? `https://gitee.com/bhuh12/fdd-contract/blob/main${props.code}` : ''))
    }
  }
})
</script>

<style lang="scss">
$border: 1px solid var(--c-border);
$header-height: 48px;

.sample-demo {
  display: flex;
  flex-direction: column;
  height: 600px;
  margin: 1em 0;
  border: $border;
  border-radius: 3px;
  content-visibility: auto;

  &.is-fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    height: auto;
    margin: 0;
    background-color: #fff;
  }

  &__hd {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: $header-height;
    padding: 0 15px;
    border-bottom: $border;

    &-title {
      font-weight: 600;
      font-size: 1rem;
    }

    &-actions {
      &-link {
        margin-left: 1em;
        font-size: 0.875rem;
        line-height: 1rem;
        cursor: pointer;
      }
    }
  }

  &__bd {
    flex: 1;
    overflow: hidden;
  }

  &__frame,
  &__code {
    height: 100%;
  }

  &__frame {
    display: block;
    width: 100%;
    border: none;
    border-bottom: $border;
  }

  &__code {
    background-color: var(--code-bg-color);
  }

  .code-group {
    display: flex;
    flex-direction: column;
    height: 100%;

    &-item__active {
      flex: 1;
      overflow: auto;
    }

    .code-group__nav {
      margin: 0;
    }

    pre[class*='language-'] {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}
</style>
